@charset "UTF-8";

/* 所有sass变量及函数 */

/* 颜色 */
$red: #f56c6c;
$orange: #e6a23c;
$green: #67c23a;
$blue: #20a0ff;
$black: #2c3e50; // 用于背景的黑色

$primary: $blue; // 主色
$success: $green; // 成功
$warning: $orange; // 警告
$error: $red; // 错误
$content: #333; // 内容
$sub-color: #999; // 辅助、图标
$disabled: #bbbec4; // 失效
$border: #dddee1; // 边框
$divider: #e9eaec; // 分割线
$background: #f8f8f8; // 背景

/* 层级 */
$z-layers: (
  'default': 1,
  'below': -1,
  'top': 9999,
  'bottom': -9999,
  'modal': (
    'base': 500,
    'close': 100,
    'header': 50,
    'footer': 10
  )
);

@function map-has-nested-keys($map, $keys...) {
  @each $key in $keys {
    @if not map-has-key($map, $key) {
      @return false;
    }

    $map: map.get($map, $key);
  }

  @return true;
}

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map.get($map, $key);
  }

  @return $map;
}

// 用法：z-index: z("modal", "base"); z-index: z("default");
@function z($layers...) {
  @if not map-has-nested-keys($z-layers, $layers...) {
    @warn "No layer found for `#{inspect($layers...)}` in $z-layers map. Property omitted.";
  }

  @return map-deep-get($z-layers, $layers...);
}

/* %placeholder */
// 居中
%center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 覆盖整个元素
%cover {
  position: absolute;
  inset: 0;
}

// 滚动条
%scrollbar {
  // 滚动条整体样式
  &::-webkit-scrollbar {
    width: 5px; // 高宽分别对应横竖滚动条的尺寸
    height: 5px;
  }

  // 滚动滑块
  &::-webkit-scrollbar-thumb {
    background: #535353;
    border-radius: 10px;

    // box-shadow: inset 0 0 5px rgba(#000, 0.2);
  }

  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(#000, 0.2);
  }
}

/* mixin */
@mixin clamp($lineClamp: 2) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $lineClamp;
  -webkit-box-orient: vertical;
}

// 三角形
@mixin triangle($direction, $size, $borderColor) {
  width: 0;
  height: 0;
  content: '';

  @if $direction == top {
    border-right: $size dashed transparent;
    border-bottom: $size solid $borderColor;
    border-left: $size dashed transparent;
  } @else if $direction == right {
    border-top: $size dashed transparent;
    border-bottom: $size dashed transparent;
    border-left: $size solid $borderColor;
  } @else if $direction == bottom {
    border-top: $size solid $borderColor;
    border-right: $size dashed transparent;
    border-left: $size dashed transparent;
  } @else if $direction == left {
    border-top: $size dashed transparent;
    border-right: $size solid $borderColor;
    border-bottom: $size dashed transparent;
  }
}

// 清楚浮动
$for-ie7: false;

@mixin clearfix {
  // 支持调用
  @if $for-ie7 {
    *zoom: 1;
  }
  &::before,
  &::after {
    display: table;
    font: 0/0 inherit;
    content: '';
  }
  &::after {
    clear: both;
  }
}
%clearfix {
  @include clearfix;
} // 支持组合申明
